<template>
	<view>
		<!-- 我的基本信息 -->
		<view class="myInfo">
			<u-avatar class="headPicture" :src="image" size="80" @click="goToImage"></u-avatar>
			<view style="font-weight: 800;" @click="editName">
				{{myInfo.name==""||myInfo.name==null?"点击编辑昵称":myInfo.name}}
			</view>
			<view style="font-weight: 600;">VID:{{myInfo.account}}</view>
			<view style="font-weight: 500;font-size: 14px;" @click="editSignature">
				{{myInfo.personalSignature==""||myInfo.personalSignature==null?"点击编辑签名":myInfo.personalSignature}}
			</view>
		</view>

		<view class="option" @click="openBottom">
			更改密码
		</view>
		<view class="option" @click="loginOut">
			退出登录
		</view>

		<u-popup class="bottom" :show="show" @close="close" @open="open" mode="center">
			<view class="input">
				<input placeholder="请输入旧密码" password="true" @input="coldPassword">
			</view>
			<view class="input">
				<input placeholder="请输入新密码" password="true" @input="cnewPassword">
			</view>
			<view class="send" @click="send">
				提交
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		socket
	} from '../../../utils/socket.js';
	import DB from 'utils/sqlite.js'
	export default {
		data() {
			return {
				myInfo: {},
				image: getApp().url +  "image/userId-" + uni.getStorageSync("userId") + ".png",
				oldPassword: "",
				newPassword: "",
				show: false
			}
		},
		methods: {
			close() {
				this.show = false
			},
			open() {
				this.show = true
			},
			coldPassword(e) {
				this.oldPassword = e.detail.value;
			},
			cnewPassword(e) {
				this.newPassword = e.detail.value;
			},
			openBottom() {
				this.show = true
			},
			send() {
				if (this.oldPassword.length < 6 || this.newPassword.length < 6) {
					uni.showToast({
						icon: 'none',
						title: "密码不能小于六位"
					})
				} else {
					uni.request({
						url: getApp().url + 'user/changePassword',
						data: {
							userId: uni.getStorageSync("userId"),
							oldPassword: this.oldPassword,
							newPassword: this.newPassword
						},
						header: {
							token: uni.getStorageSync("token")
						},
						method: "GET",
						success: (res) => {
							if (res.data.code == "-1") {
								uni.showToast({
									icon: 'none',
									title: res.data.msg
								})
							} else {
								uni.showToast({
									icon: 'none',
									title: "修改密码成功"
								})
								setTimeout(() => {
									this.show = false;
									uni.clearStorageSync();
									uni.navigateTo({
										url: "/pages/login/login"
									})
								}, 1000)
							}
						},
						fail: (error) => {
							console.log(error);
						}
					})
				}
			},
			goToImage() {
				let that = this;
				uni.chooseImage({
					sourceType: ['album'], //从相册选择s
					count: 1,
					success(res) {
						let filePath = res.tempFilePaths[0]
						uni.uploadFile({
							url: getApp().url + 'uploadImg', //仅为示例，非真实的接口地址
							filePath: filePath,
							name: 'file',
							formData: {
								'type' : 1,
								'name': uni.getStorageSync("userId")
							},
							header: {
								token: uni.getStorageSync("token")
							},
							success: (uploadFileRes) => {
								console.log(uploadFileRes.data);
								uni.request({
									url: getApp().url + 'user/update',
									data: {
										id: uni.getStorageSync("userId"),
										image: JSON.parse(uploadFileRes.data).data
									},
									header: {
										token: uni.getStorageSync("token")
									},
									method: "POST",
									success: (res) => {
										console.log(res)
										that.myInfo.image = JSON.parse(uploadFileRes.data).data;
										uni.setStorageSync("image", JSON.parse(uploadFileRes.data).data);
									},
									fail: (error) => {
										console.log(error);
									}
								})
							}
						});
					}
				});
			},
			editName() {
				let that = this;
				uni.showModal({
					title: "请输入要更改的昵称：",
					editable: true,
					success: function(res) {
						if (res.confirm) {
							if (res.content == "") {
								uni.showToast({
									icon: "error",
									title: "昵称为空"
								})
							} else {
								that.myInfo.name = res.content;
								uni.setStorageSync("name", res.content);
								uni.request({
									url: getApp().url + 'user/update',
									data: {
										id: uni.getStorageSync("userId"),
										name: res.content
									},
									header: {
										token: uni.getStorageSync("token")
									},
									method: "POST",
									success: (res) => {
										console.log(res)
									},
									fail: (error) => {
										console.log(error);
									}
								})
							}
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			},
			changePassword() {
				let that = this;
				uni.showModal({
					title: "请输入新密码：",
					editable: true,
					success: function(res) {
						if (res.confirm) {
							if (res.content == "") {
								uni.showToast({
									icon: "error",
									title: "昵称为空"
								})
							} else {
								that.myInfo.name = res.content;
								uni.request({
									url: getApp().url + 'user/update',
									data: {
										id: uni.getStorageSync("userId"),
										name: res.content
									},
									header: {
										token: uni.getStorageSync("token")
									},
									method: "POST",
									success: (res) => {
										console.log(res)
									},
									fail: (error) => {
										console.log(error);
									}
								})
							}
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			},
			editSignature() {
				let that = this;
				uni.showModal({
					title: "请输入要更改的签名：",
					editable: true,
					success: function(res) {
						if (res.confirm) {
							if (res.content == "") {
								uni.showToast({
									icon: "error",
									title: "签名为空"
								})
							} else {
								that.myInfo.personalSignature = res.content;
								uni.request({
									url: getApp().url + 'user/update',
									data: {
										id: uni.getStorageSync("userId"),
										personalSignature: res.content
									},
									header: {
										token: uni.getStorageSync("token")
									},
									method: "POST",
									success: (res) => {
										console.log(res)
									},
									fail: (error) => {
										console.log(error);
									}
								})
							}
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			},
			loginOut() {
				uni.showModal({
					title: '提示',
					content: '确认要退出登录吗？',
					success: function(res) {
						if (res.confirm) {
							uni.clearStorage();
							// DB.dropTable("chatRecords")
							// 	.then(res => {
							// 		console.log("chatRecords表删除成功", res);
							// 		this.messageList = res;
							// 	})
							// 	.catch(error => {
							// 		console.log("chatRecords表删除失败", error);
							// 	});
							// DB.dropTable('chatList')
							// 	.then(res => {
							// 		console.log("chatList表删除成功", res);
							// 		this.messageList = res;
							// 	})
							// 	.catch(error => {
							// 		console.log("chatRecords表删除失败", error);
							// 	});
							// 断开数据库连接	
							DB.closeSqlite();
							// 断开websocket连接
							var message = {
								userId: uni.getStorageSync("userId"),
								msgType: 601
							}
							socket.send(JSON.stringify(message));
							uni.navigateTo({
								url: '/pages/login/login'
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			changeVersion() {
				uni.navigateTo({
					url: "/pages/person/goToEnterprise/goToEnterprise"
				})
			}
		},
		onShow() {
			this.myInfo = {
				account: uni.getStorageSync("account"),
				image: uni.getStorageSync("image"),
				name: uni.getStorageSync("name"),
				personalSignature: uni.getStorageSync("personalSignature")
			}
		}
	}
</script>

<style lang="scss">
	.myInfo {
		margin: 10vw 5vw 0vw 5vw;
		padding: 0 5vw 5vw 5vw;
		box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
		border-radius: 10px;
		display: flex;
		flex-direction: column;
		align-items: center;

		.headPicture {
			position: relative;
			bottom: 5vw;
		}
	}

	.option {
		height: 15vw;
		text-align: center;
		line-height: 15vw;
		margin: 5vw 5vw 0 5vw;
		border-radius: 10px;
		box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
	}

	.bottom {

		.send {
			margin: 5vw 5vw;
			height: 40px;
			line-height: 40px;
			border-radius: 20px;
			text-align: center;
			color: #FFF;
			background-color: #41A863;
		}

		.input {
			margin: 5vw 5vw;
			text-align: center;
			border: 1px solid;
			height: 30px;
			line-height: 30px;
			border-radius: 15px;
		}
	}
</style>